<template>
  <div class="p-20 flex-col grow-1">
    <div class="flex-col grow-1">
      <el-input v-model="text" placeholder="输入: enmotion 将阻止跳转，提示未保存"></el-input>
      <span class="flex-col my-10">TEST : {{route.params}}</span>
      <span class="flex-row justify-between mb-10 last:mb-0">
        <el-button
          class="mx-0" 
          @click="dynamicRouter.push({
            name:'catch-test-center'
          })">
          返回测试中心123
        </el-button>
        <el-button
          class="mx-0" 
          @click="dynamicRouter.back()">
          返回
        </el-button>
      </span>
      <div class="flex-row flex-wrap h-auto">
        <div v-for="(item,index) in  routeMenu" :key="index+(item.name as string)" class="flex-col h-auto w-1/3 p-10 mb-5 last:mb-0">
          <div class="flex-col border border-light-6 rounded bg-light-10">
            <div class="text-xs">{{ item }}</div>
            <el-button class="w-full mt-10" type="success" @click="dynamicRouter.push(item)">{{ item.name }}</el-button>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script lang="ts">
import { useRoute } from "vue-router";
import { defineComponent, ref, onActivated, onMounted, watch, type PropType, } from 'vue';
import type { VmoxRouteLocationNamedRaw } from "@src/router/use.lib"
import { useRouter } from 'vue-router';
import { useRouterStateStore } from "@src/router/state";

export default defineComponent({
  // name:'test-pg',
  props:{
    id:{
      type:String as PropType<string>,
      default:''
    },
    name:{
      type:String as PropType<string>,
      default:''
    },
  },
  setup(porps,context){
    const route = useRoute();
    const text = ref('');
    const dynamicRouter = useRouter();
    const routerStore = useRouterStateStore();

    watch(()=>text.value,(n)=>{
      routerStore.setPreventNavigation(n == 'enmotion') 
    },{immediate:true});
    const routeMenu = ref([
    {
      name:'enmotion1',
      query:{name:'queryname1'},
      params:{name:'name1',tanentId:'id1'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion1/:name/:tanentId',
          meta:{
            keepAlive:true,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion1',
      query:{name:'queryname2'},
      params:{name:'name2',tanentId:'id2'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion1/:name/:tanentId',
          meta:{
            keepAlive:false,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion2',
      query:{name:'enmotion'},
      params:{name:'enmotion'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion2/:name',
          meta:{
            keepAlive:true,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion3',
      query:{name:'enmotion'},
      params:{name:'enmotion'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion3/:name',
          meta:{
            keepAlive:false,
            pageName:'enmotion1'
          }
        }
      }
    },
    ] as VmoxRouteLocationNamedRaw[]);
    onMounted(()=>{
      console.log('onMounted',text.value=='enmotion')
      routerStore.setPreventNavigation(text.value == 'enmotion')
    })
    onActivated(()=>{
      console.log('onActivated',route.name,route.query,text.value, text.value!='enmotion')
      routerStore.setPreventNavigation(text.value == 'enmotion')
    })
    return {
      text,
      dynamicRouter,
      routeMenu,
      // lazyOpen,
      route
    }
  }
});
</script>@src/router/use.lib/preventBrowserBehavior